import { scene } from './utils/init'
import * as dat from 'dat.gui'
import * as THREE from 'three'

function initBase() {
  const geometry = new THREE.SphereGeometry(1, 32, 16)

  const cubeTL = new THREE.CubeTextureLoader()
  const cubeTexture = cubeTL.setPath('image/sky/').load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'])

  // 使用物理网格材质(车漆、碳纤、被水打湿的表面再覆盖一层透明的，具有一定反光的面)
  // -在标准网格材质的基础上添加了一些新的属性（大部分的属性是关闭的，每开启一项新的属性都会更加耗性能）
  const material = new THREE.MeshPhysicalMaterial({ 
    envMap: cubeTexture, // 使用物理网格材质的时候，这个属性是必填的
    roughness: 1,
    metalness: 1,
    clearcoat: 1, // 1. 设置清晰度 （0, -1） 表面加上一层薄薄的半透明的材质 - clearcoat层
    clearcoatRoughness: 0, // clearcoat层的粗糙度 如果是1，上面的清漆度的效果就会更加明显
  })

  const gui = new dat.GUI()
  gui.add(material, 'roughness', 0, 1, 0.1).name('粗糙度')
  gui.add(material, 'metalness', 0, 1, 0.1).name('金属度')
  gui.add(material, 'clearcoat', 0, 1, 0.1).name('清晰度')
  gui.add(material, 'clearcoatRoughness', 0, 1, 0.1).name('清晰度的粗糙度')

  scene.background = cubeTexture

  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)
}

function createLight () {
    const light = new THREE.AmbientLight(0xffffff)
    scene.add(light)
    const direction = new THREE.DirectionalLight(0xffffff, 2)
    direction.position.set(2, 3, 2)
    scene.add(direction)
    const helper = new THREE.DirectionalLightHelper(direction, .5)
    scene.add(helper)
}

initBase()
createLight()